<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <el-table :data="rightsList" style="widht: 100%" border stripe>
            <el-table-column type="index" fixed=""></el-table-column>
            <el-table-column label="权限名称">
                <template #default="scope">{{ scope.row.authName}}</template>
            </el-table-column>
            <el-table-column label="路径">
                <template #default="scope">{{ scope.row.path }}</template>
            </el-table-column>
            <el-table-column label="权限等级">
                <template #default="scope">
                    <el-tag v-if="scope.row.level == 0">一级</el-tag>
                    <el-tag class="ml-2" type="success" v-else-if="scope.row.level == 1">二级</el-tag>
                    <el-tag class="ml-2" type="warning" v-else-if="scope.row.level == 2">三级</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
import axios from '../../http/axios.js'

export default {
    name: 'right',
    data(){
        return {
            rightsList: []
        }
    },
    created(){
        this.getRightList();
    },
    methods:{
        async getRightList(type){
            const _type = type || 'list';

            const { data: res} = await axios.get('rights/' + _type);

            if(res.meta.status !== 200){
                this.$message({
                    type: 'error',
                    message: '获取权限列表失败'
                });
            }else{
                this.rightsList = res.data;
            }

        }
    }
}
</script>

<style>

</style>